/*大范围区域的背景。例如网页背景*/
@range-bg: linen;
@px: 0.0625rem;
@font-size: 24;
@dark-color: maroon;
@font-color: black;
@shadow-color: gray;

* {margin: 0px; padding: 0px;}
body {
    background: @range-bg;
    font-family: 'AR PL UMing CN','宋体','黑体';
}
.hide {display:none;}

.gragh-brief {
    position: fixed;
    top: 0;
    right: 0;
    color: lighten(@font-color, 50%);
}
.gragh-load {
    position: fixed;
    top: 20*@px;
    left: 20*@px;
    color: dimgray;
    font-size: 36*@px;
}

.person {
    float: left;
    color: @font-color;
    background: @range-bg;
    flex: 0 0 auto;
    margin: 0;
    border: 3*@px solid @dark-color;
    padding:2*@px;
    box-shadow: 3*@px 3*@px 5*@px @shadow-color;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 4.5*@font-size*@px;
    
    .human {
        flex: initial;
        border: 1*@px solid @dark-color;
        cursor: pointer;
    }
    .master {
        .human;
        padding: 0.3*@font-size*@px 0.2*@font-size*@px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

        .name {
            @unit: @font-size;
            word-break: keep-all;
            overflow: visible;
            font-size: @unit*@px;
            font-weight: bold;
            writing-mode: vertical-rl;
            text-align: justify;
            text-align-last: justify;
            text-justify: inter-character;
            text-shadow: -2*@px 2*@px 3*@px @shadow-color;
            position: relative;
            width: @unit*@px;
            height: 100%;
            flex: 0 1 auto;
        }
        .name.char5 {
            font-size: 0.8*@font-size*@px;
        }
        .name.char6 {
            font-size: 0.65*@font-size*@px;
        }
    
        @script-unit: 0.5*@font-size;
        .script-box {
            flex: 0 1 auto;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
        }
    
        .script {
            @unit: @script-unit;
            flex: 0 1 auto;
            width: @unit*@px;
            height: 2.5*@unit*@px;
            margin-left: 0.5*@unit*@px;
            font-size: @unit*@px;
            font-weight: normal;
            color: dimgray;
            writing-mode: vertical-rl;
            text-align: justify;
            text-align-last: justify;
            text-justify: inter-character;
        }
        .super-script {
            .script;
        }
        .super-script.char3 {
            @unit: @script-unit;
            height: 3.5*@unit*@px;
        }
        .super-script.char4 {
            @unit: @script-unit;
            height: 4.5*@unit*@px;
        }
        .super-script.char5 {
            @unit: @script-unit;
            height: 5.5*@unit*@px;
        }
        .sub-script {
            .script;
        }
        .sub-script.char3 {
            @unit: @script-unit;
            height: 3.5*@unit*@px;
        }
        .sub-script.char4 {
            @unit: @script-unit;
            height: 4.5*@unit*@px;
        }
        .sub-script.char5 {
            @unit: @script-unit;
            height: 5.5*@unit*@px;
        }
    }
    .master:hover {
        .master;
        text-decoration:underline;
    }

    .servant-list {
        color: dimgray;
        margin: -1*@px 0 0 0;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;

        .servant {
            .human;
            margin: 1*@px 0 0 2*@px;
            padding: 1*@px;
            font-size: 0.5*@font-size*@px;
            text-align: justify;
            text-align-last: justify;
            text-justify: inter-character;
            word-break: keep-all;
            color: deeppink;
        }
        .servant:hover {
            .servant;
            text-decoration:underline;
        }
        .servant.male {
            color: mediumblue;
        }
    }
}

.person.dead {
    border-color: dimgray;
    color: dimgray;
}
.space-between-person {
    float: left;
    opacity: 0;
    min-height: 10*@px;
    width: 20*@px;
    flex: 0 0 auto;
}

.graph {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin-top: 20*@px;

    .level {
        flex: 0 1 auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    .space-between-level {
        flex: 0 1 auto;
        height: 40*@px;
    }
}

.hline {
    position: absolute;
    height: 2*@px;
    background-color: dimgray;
}
.vline {
    position: absolute;
    width: 2*@px;
    background-color: dimgray;
}

.couple-box {
    position: absolute;
    z-index: -1;
    height: 5.6*@font-size*@px;
    background-color: lightpink;
    border: 2*@px solid gray;
    box-shadow: 0.3*@font-size*@px 0.3*@font-size*@px 0.4*@font-size*@px lighten(@shadow-color,30%);
}

.popper {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 300*@px;
    min-height: 100*@px;
    max-height: 200*@px;
    overflow-y: auto;
    background-color: white;// khaki;
    border: @px solid lightblue;
    box-shadow: 3*@px 3*@px 5*@px gray;
    padding: 3*@px;
    font-size:14*@px;
    line-height: 20*@px;
    table {
        width: 100%;
        tr.name {
            text-align: center;
            font-size:16*@px;
            font-weight: bold;
            td {
                border-top: none;
            }
        }
        td {
            border-top: @px dotted gray;
            padding: 5*@px;
        }
        td:first-child {
            font-weight: bold;
            color: gray;
            width: 40*@px;
        }
    }
    .close {
        border: @px solid gray;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 11*@px;
        cursor: pointer;
    }
}